.news-item {
    background-color: #384352; /* Темный фон, как на сайте */
    border: 1px solid #393c46; /* Темная рамка */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
  }
  
  .news-title {
    color: #eee; /* Светлый текст заголовка */
    font-size: 20px;
    margin-bottom: 10px;
    font-family: monospace; /* Добавим пиксельный шрифт */
  }
  
  .news-image-container {
    display: flex; /* Для расположения картинок в ряд */
    flex-wrap: wrap; /* Чтобы картинки переносились на новую строку */
    gap: 10px; /* Расстояние между картинками */
    margin-bottom: 10px;
  }
  
  .news-image {
    max-width: 48%; /* Максимальная ширина картинки (две в ряд) */
    height: auto; /* Автоматическая высота */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Легкая тень */
  }
  
  .news-description {
    color: #e6e2ce; /* Светлый текст описания */
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
    font-family: monospace; /* Добавим пиксельный шрифт */
  }
  
  .news-attachment {
    margin-top: 10px;
  }
  
  .news-attachment a {
    color: #7289da; /* Цвет ссылки (примерно как в Discord) */
    text-decoration: none;
    font-weight: bold;
    font-family: monospace; /* Добавим пиксельный шрифт */
  }
  
  .news-attachment a:hover {
    text-decoration: underline;
  }
  .quiz {
    margin-top: 15px;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 5px;
  }
  
  .quiz-title {
    color: #ddd;
    font-size: 16px;
    margin-bottom: 10px;
    font-family: monospace;
  }
  
  .quiz-options {
    display: flex;
    flex-direction: column; /* Расположим кнопки вертикально */
    gap: 5px;
  }
  
  .quiz-option {
    background-color: #44656d;
    color: #e7e0be;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: monospace;
  }
  
  .quiz-option:hover {
    background-color: #96a4aa;
  }
  
  .quiz-option.correct {
    border: 2px solid #52c293; /* Зеленый цвет для правильного ответа */
  }
  
  .quiz-option.incorrect {
    border: 2px solid #b86127; /* Оранжевый для неправильного */
  }
  
  .quiz-feedback {
    color: #eee;
    font-size: 14px;
    margin-top: 10px;
    font-family: monospace;
  }

    main {
      width: 80%; /* Занимает 80% ширины экрана */
      max-width: 1200px; /* Максимальная ширина */
      margin: 0 auto; /* Центрирование */
      padding: 20px;
      background-color: #15202b; /* Белый фон main */
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    }

    /* Стили для контейнера постов (вертикальный) */
    #telegram-posts {
      margin-bottom: 20px;
    }

    /* Стили для отдельного поста (с вертикальной прокруткой) */
    .post-container {
      width: 60%; /* Занимает 60% ширины main */
      margin: 0 auto 20px; /* Центрирование и отступ снизу */
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box; /* Чтобы padding не увеличивал ширину */
      height: 300px; /* Фиксированная высота */
      overflow-y: auto; /* Вертикальная прокрутка */
    }

    /* Стили для кнопок пагинации */
    .pagination {
      text-align: center;
      margin-top: 20px;
    }

    .pagination button {
      padding: 8px 16px;
      margin: 5px;
      border: none;
      background-color: #8596CF;
      color: white;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease; /* Плавный переход цвета */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень */
    }

    .pagination button:hover {
      background-color: #6377b3; /* Затемнение при наведении */
    }

    .pagination button:focus {
      outline: none; /* Убираем обводку при фокусе */
      box-shadow: 0 0 5px rgba(133, 150, 207, 0.5); /* Свечение при фокусе */
    }

    /* Медиа-запрос для мобильных устройств */
    @media (max-width: 768px) {
      main {
        width: 100%; /* Занимаем почти всю ширину экрана на мобильных */
      }

      .post-container {
        width: 100%; /* Занимаем 90% ширины main на мобильных */
        height: 100%; /* Увеличиваем высоту на мобильных */
    }

      .pagination button {
        padding: 6px 12px; /* Уменьшаем размер кнопок на мобильных */
        margin: 3px;
      }
      #telegram-posts {
      overflow-x: hidden; /* Убираем горизонтальную прокрутку */
    }
    }